<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子合同申请</title>

    <!--引入本地 element-ui 的样式，-->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>

    <style>
        table {
            page-break-inside: avoid;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    </style>

</head>
<body>

    <div id="app">
        <!-- 每页数据数量一定，最后一页需要显示合计 -->
        <div id="printListRoster">
            <div
                    v-for="(item, index) in 1"
                    :key="index"
                    style="page-break-after: always"
            >
                <table
                        border="1"
                        cellpadding="8"
                        style="border-collapse: collapse; width: 100%; font-size: 10px"
                >
                    <thead>
                    <tr>
                        <td colspan="16" >
                            <p style="font-size: 20px;text-align: center;">{{title}}</p>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="16" >
                            <p style="text-align: left;">编制单位：公共事务中心医疗保险中心</p>
                        </td>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <th align="center" rowspan="2">序号</th>
                        <th align="center" rowspan="2">单号</th>
                        <th align="center" rowspan="2">年度</th>
                        <th align="center" rowspan="2">身份证号</th>
                        <th align="center" rowspan="2" >姓名</th>
                        <th align="center" rowspan="2">医保手册号</th>
                        <th align="center" colspan="3">普通门诊</th>
                        <th align="center" colspan="3">特慢病</th>
                        <th align="center" colspan="3">住院</th>
                        <th align="center" rowspan="2">总计</th>
                    </tr>
                    <tr>
                        <th align="center">总费用</th>
                        <th align="center">可报金额</th>
                        <th align="center">实际报销金额</th>
                        <th align="center">总费用</th>
                        <th align="center">可报金额</th>
                        <th align="center">实际报销金额</th>
                        <th align="center">住院总费用</th>
                        <th align="center">可报金额</th>
                        <th align="center">实际报销金额</th>
                    </tr>
                    <!-- 这里是循环的列表数据 -->
                    <tr v-for="(item1,index1) in list1.list" :key="index1">
                        <td align="center">{{item1.rw}}</td>
                        <td align="center">{{item1.knn001}}</td>
                        <td align="center">{{item1.aae001}}</td>
                        <td align="center">{{item1.aac002}}</td>
                        <td align="center"   >{{item1.aac003}}</td>
                        <td align="center">{{item1.kcc001}}</td>
                        <td align="center">{{item1.kni035}}</td>
                        <td align="center">{{item1.kni037}}</td>
                        <td align="center">{{item1.kni038}}</td>
                        <td align="center">{{item1.kni047}}</td>
                        <td align="center">{{item1.kni053}}</td>
                        <td align="center">{{item1.kni054}}</td>
                        <td align="center">{{item1.kni014}}</td>
                        <td align="center">{{item1.kni027}}</td>
                        <td align="center">{{item1.kni028}}</td>
                        <td align="center">{{item1.sum}}</td>
                    </tr>
                    <!-- 员工小计或供养直系亲属小计 -->
                    <tr>
                        <td align="center" colspan="5">小计：员工</td>
                        <td align="center">{{list1.sum.kcc001}}</td>
                        <td align="center">{{list1.sum.kni035}}</td>
                        <td align="center">{{list1.sum.kni037}}</td>
                        <td align="center">{{list1.sum.kni038}}</td>
                        <td align="center">{{list1.sum.kni047}}</td>
                        <td align="center">{{list1.sum.kni053}}</td>
                        <td align="center">{{list1.sum.kni054}}</td>
                        <td align="center">{{list1.sum.kni014}}</td>
                        <td align="center">{{list1.sum.kni027}}</td>
                        <td align="center">{{list1.sum.kni028}}</td>
                        <td align="center">{{list1.sum.sum}}</td>
                    </tr>
                    <tr v-for="(item1,index1) in list2.list" :key="index1">
                        <td align="center">{{item1.rw}}</td>
                        <td align="center">{{item1.knn001}}</td>
                        <td align="center">{{item1.aae001}}</td>
                        <td align="center">{{item1.aac002}}</td>
                        <td align="center">{{item1.aac003}}</td>
                        <td align="center">{{item1.kcc001}}</td>
                        <td align="center">{{item1.kni035}}</td>
                        <td align="center">{{item1.kni037}}</td>
                        <td align="center">{{item1.kni038}}</td>
                        <td align="center">{{item1.kni047}}</td>
                        <td align="center">{{item1.kni053}}</td>
                        <td align="center">{{item1.kni054}}</td>
                        <td align="center">{{item1.kni014}}</td>
                        <td align="center">{{item1.kni027}}</td>
                        <td align="center">{{item1.kni028}}</td>
                        <td align="center">{{item1.sum}}</td>
                    </tr>
                    <!-- 员工小计或供养直系亲属小计 -->
                    <tr>
                        <td align="center" colspan="5">小计：供养直系亲属</td>
                        <td align="center">{{list2.sum.kcc001}}</td>
                        <td align="center">{{list2.sum.kni035}}</td>
                        <td align="center">{{list2.sum.kni037}}</td>
                        <td align="center">{{list2.sum.kni038}}</td>
                        <td align="center">{{list2.sum.kni047}}</td>
                        <td align="center">{{list2.sum.kni053}}</td>
                        <td align="center">{{list2.sum.kni054}}</td>
                        <td align="center">{{list2.sum.kni014}}</td>
                        <td align="center">{{list2.sum.kni027}}</td>
                        <td align="center">{{list2.sum.kni028}}</td>
                        <td align="center">{{list2.sum.sum}}</td>
                    </tr>
                    </tbody>

                </table>
                <div
                        style="
              display: flex;
              justify-content: space-around;
              margin-top: 30px;
              font-size: 10px;
            "
                >
                    <div>审核人：</div>
                    <div>复核人：</div>
                    <div>填报人：</div>
                    <div>填报日期：</div>
                </div>
            </div>
        </div>
    </div>

    <script>


        var vm = new Vue({
           el:"#app",
            data() {
                return {
                    // 表格数据
                    list1:{},
                    list2:{},
                    title:""
                };
            },
            methods: {
                printHtml(){
                    $("#printListRoster").print();
                },

                // 获取表格数据
                setData(data) {
                    this.list1 = data[0];
                    this.list2 = data[1];
                    this.title = data.title;
                },
                //   打印方法
                goPrint() {
                    printJS({
                        printable: "printListRoster",
                        type: "html",
                        // 表格表头较复杂且每页要显示审核人等信息，所以不能用json数据打印
                        // properties: [
                        //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                        //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                        // ],
                        // header: `<div style="font-size:30px;text-align:center;"> 玉门油田企业员工补充医疗保险结算单 </div>`,
                        style: "@media print{@page {size:landscape}}",
                        // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                        // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                        // repeatTableHeader: true,
                        scanStyles: false,
                        targetStyles: ["*"],
                        ignoreElements: ["no-print"],
                    });
                },
                // 关闭窗口
                handleClose() {
                    this.remoteClose();
                },
            },
        });

        function setData(data){
            vm.setData(data);
        }
    </script>
</body>
</html>